body {
  background-color: #dbdde0;
}

.top1 {
  height: 63px;
  background-color: #333;
}

.top1 img {
  margin-left: 170px;
}

.top2 {
  background-color: #222;
  height: 50px;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.top2 .left {
  display: flex;
  margin-left: 169px;
  color: white;
}

.top2 .left div {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #2a2a2a;
  width: 75px;
  height: 50px;
  border-left: 1px solid #353535;
  border-right: 1px solid #0d0c08;
}

.top2 .left div:nth-child(1) {
  height: 46px;
  border-bottom: 4px solid #dc1720;
}

.top2 .left div:nth-child(1):hover {
  background-color: #dc1720;
}

.top2 .right {
  display: flex;
  margin-right: 389px;
  color: white;
}

.top2 .right div {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #2a2a2a;
  width: 60px;
  height: 50px;
  border-left: 1px solid #353535;
  border-right: 1px solid #0d0c08;
}

.mid {
  display: flex;
  margin-top: 10px;
}

.mid .left-wrapper {
  background-color: white;
  margin-left: 170px;
  width: 960px;
  height: 1000px;
  display: flex;
  flex-direction: column;
}

.mid .right-wrapper {
  background-color: #eee;
  width: 400px;
  height: 1000px;
}

.mid .left-wrapper .left-items-top {
  display: flex;
}

.mid .left-wrapper .left-items {
  margin-top: 20px;
}

.mid .left-wrapper .left-items .number-wrapper {
  width: 180px;
  height: 54px;
  background-color: #dd171f;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mid .left-wrapper .left-items .number-wrapper span:nth-child(1) {
  color: white;
  font-size: 18px;
  text-align: right;
  margin-right: 20px;
  font-weight: 600;
}

.mid .left-wrapper .left-items .number-wrapper span:nth-child(2) {
  color: #aaa;
  font-size: 14px;
  text-align: right;
  margin-right: 20px;
}

.mid .left-wrapper .right-items {
  display: flex;
  margin-left: 20px;
}

.mid .left-wrapper .right-items .wrapper {
  width: 233px;
  height: 247px;
  border: 1px solid #ddd;
  margin-right: 20px;
  margin-top: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mid .left-wrapper .right-items .wrapper span {
  margin-top: 40px;
  font-size: 20px;
  color: #313131;
}

.mid .left-wrapper .right-items .wrapper img {
  margin-top: 31px;
}

.mid .left-wrapper .right-items .wrapper a {
  color: #999;
  margin-top: 10px;
  text-decoration: none;
  font-size: 12px;
}

.mid .left-wrapper .right-items .wrapper a:hover {
  color: red;
}

.mid .left-wrapper .left-items-mid {
  display: flex;
}

.mid .left-wrapper .left-items-mid .left-items {
  margin-top: 60px;
}

.mid .left-wrapper .left-items-mid .left-items .number-wrapper {
  width: 180px;
  height: 54px;
  background-color: #5c5d5e;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mid .left-wrapper .left-items-mid .right-items {
  margin-top: 50px;
}

.mid .left-wrapper .left-items-mid .right-items .left-img .img {
  margin-top: 10px;
  width: 362px;
  height: 204px;
  overflow: hidden;
}

.mid .left-wrapper .left-items-mid .right-items .left-img .img:nth-child(3) {
  margin-top: 20px;
}

.mid .left-wrapper .left-items-mid .right-items .right-img {
  margin-left: 20px;
}

.mid .left-wrapper .left-items-mid .right-items .right-img .img1 {
  margin-top: 10px;
  width: 362px;
  height: 204px;
  overflow: hidden;
}

.mid .left-wrapper .left-items-mid .right-items .right-img .img2 {
  margin-top: 10px;
  width: 362px;
  height: 428px;
  overflow: hidden;
}

.mid .right-wrapper .top {
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 400px;
  background-color: #ccc;
}

.mid .right-wrapper .middle, .mid .right-wrapper .bottom {
  font-size: 18px;
  color: white;
}

.mid .right-wrapper .middle .mag, .mid .right-wrapper .bottom .mag, .mid .right-wrapper .bottom .activity {
  height: 40px;
  width: 400px;
  display: flex;
  align-items: center;
  background-color: #222;
}

.mid .right-wrapper .middle .mag span, .mid .right-wrapper .bottom .mag span, .mid .right-wrapper .bottom .activity span {
  margin-left: 10px;
}

.mid .right-wrapper .middle .image, .mid .right-wrapper .bottom .image {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 133px;
  width: 400px;
  background-color: #333;
}

.mid .right-wrapper .bottom .image1 {
  display: flex;
  flex-direction: column;
  height: 280px;
  width: 400px;
  background-color: #333;
}

.mid .right-wrapper .bottom .image1 .one {
  display: flex;
  justify-content: space-around;
  margin-top: 16px;
}
